<script setup lang="ts">
defineProps({
  icon: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
});
</script>
<template>
  <div class="xcontainer mb-5">
    <h4>
      <i :style="{ backgroundImage: `url(${icon})` }"></i>
      {{ title }}
    </h4>
    <slot />
  </div>
</template>
<!-- <style lang="scss" scoped>
.xcontainer {
  width: 30%;
  height: 400rem;
  background-color: #fff;
  box-shadow: 0 1rem 8rem 0 #ccc;
  position: relative;

  h4 {
    position: relative;
    margin-left: 20rem;
    font-weight: 700;
    font-size: 18rem;
    color: #a3b1cc;
    padding: 28rem 28rem 26rem 31rem;
    background-repeat: no-repeat;
    background-position: 0;
    line-height: 1;
    margin-bottom: 0;

    i {
      height: 22rem;
      width: 22rem;
      display: block;
      position: absolute;
      top: 50%;
      left: 0rem;
      transform: translateY(-50%);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}
</style>
 -->
<style lang="scss" scoped>
.xcontainer {
  // width: 30%;
  flex: 1;
  min-width: 300px;
  height: 25rem;
  background-color: #fff;
  box-shadow: 0 0.06rem 0.5rem 0 #ccc;
  position: relative;

  h4 {
    position: relative;
    margin-left: 1.25rem;
    font-weight: 700;
    font-size: 1.13rem;
    color: #a3b1cc;
    padding: 1.75rem 1.75rem 1.63rem 1.94rem;
    background-repeat: no-repeat;
    background-position: 0;
    line-height: 1;
    margin-bottom: 0;

    i {
      height: 1.38rem;
      width: 1.38rem;
      display: block;
      position: absolute;
      top: 50%;
      left: 0rem;
      transform: translateY(-50%);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}
</style>
